<template>
  <div>
    <div class="phm-from">
      <div class="form-top">
        <form action="">
          <p class="form-top-p">
            <el-select v-model="valuek.selectLin" class="phm-form" clearable placeholder="选择线路">
              <el-option
                v-for="item in formz.selectLin"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.selectXingb" style="width: 130px;" class="phm-form" clearable placeholder="行别">
              <el-option
                v-for="item in formz.selectXingb"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-date-picker
              v-model="valuek.selectShij"
              style="width: 250px;"
              class="phm-form input-long"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd" />
          </p>
          <el-button type="primary" class="form-button" icon="el-icon-search" @click="onSubmit()">查询</el-button>
          <el-button
            class="refresh-btn"
            size="mini"
            type="primary"
            icon="el-icon-refresh"
            @click="resetListQuery">重置</el-button>
        </form>
      </div>
      <div class="tableContainer widthPage" :class="{ foremZank: isActive }">
        <el-table
          :data="tableDataDefect"
          height="100%"
          style="width: 100%; margin-top: 20px;">
          <el-table-column
            prop="detectDate"
            label="检测日期"
            sortable
            width="120"
            align="center" />
          <el-table-column
            prop="lineAttr.lineName"
            label="线路"
            sortable
            width="120"
            align="center" />
          <el-table-column
            prop="directionAttr.directionName"
            label="行别"
            align="center"
            sortable
            width="100" />
          <el-table-column
            prop="packetName"
            label="数据包"
            sortable
            align="center" />
          <el-table-column
            prop="beginSiteAttr.siteName"
            label="起始公里标（km）"
            sortable
            width="140"
            align="center" />
          <el-table-column
            prop="endSiteAttr.siteName"
            label="结束里标（km）"
            sortable
            width="130"
            align="center" />
          <el-table-column
            prop="section"
            label="段"
            sortable
            width="150"
            align="center" />

          <!-- <el-table-column
            prop="station"
            sortable
            label="备注"
            align="center"
            width="340">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="bottom">
                <p>{{ scope.row.station }}</p>
                <div slot="reference">
                  {{ scope.row.station }}
                </div>
              </el-popover>
            </template>
          </el-table-column> -->
          <el-table-column
            width="140"
            align="center"
            fixed="right">
            <template slot="header">
              操作<!--  <a class="from-xians" @click="play = !play" /> -->
            </template>
            <template>
              <a class="el-icon-view" @click="isActive=!isActive" />
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <Pagination
            :hidden="false"
            :total="total"
            :page.sync="queryParams.page"
            :size.sync="queryParams.size"
            @pagination="getC4DataByParams" />
        </div>
      </div>
      <div v-show="play" class="formColumn">
        <div class="formColumn-div">
          <p class="formColumn-top">选择列<i class="el-icon-close formColumn-guan" @click="play = !play" /></p>
          <div class="formColumn-neir">
            <ul>
              <li>工作票号</li>
              <li>计划号</li>
              <li>检修项目</li>
              <li>作业地点</li>
              <li>日期</li>
              <li>申请时间</li>
              <li>行调时间</li>
              <li>电调时间</li>
              <li>电调时间</li>
              <li>电调时间</li>
              <li>电调时间</li>
            </ul>
          </div>
          <el-button class="formColumn-button1" type="primary" icon="el-icon-refresh">重置</el-button>
          <el-button class="formColumn-button2" type="primary" icon="el-icon-circle-check-outline">确定</el-button>
        </div>
      </div>
    </div>
    <div class="phm-tanc" :class="{ phmtancshow: isActive }">
      <p class="phm-tanc-top"><span class="el-icon-arrow-left" @click="isActive=!isActive" /><span class="el-icon-close" @click="isActive=!isActive" />3C检测详情</p>
      <A2C :show-pillar-pager="true" style="height: calc(100% - 50px); padding: 0 20px;" />
    </div>
  </div>
</template>

<script>
// 检测数据查询
import A2C from './A2cAnalysis.vue'
import { find3cDetectData } from '@/api/cms/detect-data'
import { line, listDirection } from '@/api/cms/detect-data/basic'
export default {
  components: {
    A2C
  },
  props: {},
  data() {
    return {
      value1: '',
      play: false,
      isActive: false,
      fomSlect1: '',
      tableDataDefect: [],
      total: 0,
      queryParams: {
        page: 1,
        size: 20
      },
      valuek: {
        selectLin: [], // 选择线路
        selectShij: '', // 时间,
        selectXingb: [] // 行别
      },
      formz: {
        selectLin: [],
        selectXingb: [] // 行别
      }
    }
  },
  mounted() {
    /* const data = []
    for (let i = 0; i < 20; i++) {
      const line = this.PHMTESTDATA.phmvariable.line[parseInt(Math.random() * 4.9)]
      const start = parseInt(Math.random() * 100)
      data.push({
        indexph: '2019-05-' + (10 + i),
        device: line,
        line: '下行',
        gongli: 'K' + (21 + start) + '+' + (Math.random() * 400 + 100).toFixed(2),
        jies: 'K' + (35 + start) + '+' + (Math.random() * 400 + 100).toFixed(2),
        stream: '2019-05-' + (10 + i) + ' ' + line + ' 下行',
        duan: this.PHMTESTDATA.phmvariable.vehicle[parseInt(Math.random() * 2.9)],
        station: '无'
      })
    }
    this.tableDataDefect = data*/
    this.line()
    this.listDirection()
    this.getC4DataByParams()
  },
  methods: {
    getItme(index) {
      this.activeClass = index
    },
    handleEdit(row) {
      console.log(row)
    },
    formtanc: function() {
      this.play = !this.play // 取反
    },
    getC4DataByParams() {
      // this.$emit('findDetectData', this.queryParams)
      find3cDetectData(this.queryParams).then(response => {
        // console.log('3C检测数据查询', response)
        if (response.data) {
          this.tableDataDefect = response.data.records
          this.total = response.data.total
        }
      })
    },
    getSearchCondition(val) {
      const line = val.selectLin
      const lineCode = line.split('-')[1]
      this.queryParams.lineCode = lineCode
      const time = val.selectShij
      if (time && time.length) {
        const startDate = time[0]
        const endDate = time[1]
        this.queryParams.startDate = startDate
        this.queryParams.endDate = endDate
      }
      this.queryParams.directionCode = val.selectXingb
      this.getC4DataByParams()
    },
    line() {
      line().then(response => {
        // console.log('线路下拉框', response)
        const lines = []
        if (response.data) {
          response.data.forEach(item => {
            const line = {}
            line.value = item.lineCode
            line.label = item.lineName
            lines.push(line)
          })
        }
        this.formz.selectLin = lines
      })
    },
    listDirection() {
      listDirection().then(response => {
        // console.log('行别下拉框', response)
        const directions = []
        if (response.data) {
          response.data.forEach(item => {
            const direction = {}
            direction.value = item.directionCode
            direction.label = item.directionName
            directions.push(direction)
          })
        }
        this.formz.selectXingb = directions
      })
    },
    onSubmit() {
      const lineCode = this.valuek.selectLin
      this.queryParams.lineCode = lineCode
      const time = this.valuek.selectShij
      if (time && time.length) {
        const startDate = time[0]
        const endDate = time[1]
        this.queryParams.startDate = startDate
        this.queryParams.endDate = endDate
      } else {
        delete this.queryParams.startDate
        delete this.queryParams.endDate
      }
      const directionCode = this.valuek.selectXingb
      this.queryParams.directionCode = directionCode
      this.getC4DataByParams()
    },
    resetListQuery() {
      this.valuek = {
        selectSection: '',
        selectLin: [], // 选择线路
        selectShij: [] // 时间
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .phm-from {
    height: 100%;
    padding-top: 0;
  }
</style>
